<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .mi-box {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
        }

        .circle {
            border-radius: 50%;
        }


    </style>
</head>
<body>
<div id="app">
<div>class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。</div>

    <p>json绑定，key为class，值为vue对象中绑定的值，与数组在vue对象中绑定不同</p>
    <div class="mi-box" v-bind:class="{circle:showCircle}"></div>

</div>

<script>
    var v = new Vue({
        el: '#app',
        data: {
            showCircle: true
        },
        mounted: function () {
            var that = this;
            setTimeout(function () {
                that.showCircle = false;
            }, 1000);
        },

    })


</script>

</body>
</html>